<!--
 * @Author: luoqi
 * @Date: 2022-03-05 14:27:04
 * @LastEditors: luoqi
 * @LastEditTime: 2022-05-12 13:12:50
 * @Description: 
-->
<template>
  <div id="box">
    <router-view v-if="isRouterAlive" />
  </div>
</template>

<script>
export default {
  name: "App",
  provide() {
    return {
      reload: this.reload,
      websocketsend: this.websocketsend,
    };
  },
  data() {
    return {
      isRouterAlive: true,
      websock: null, //websocket对象
    };
  },
  computed: {
    isLogin() {
      return this.$store.state.isLogin;
    },
  },
  watch: {
    isLogin: {
      handler(newData, old) {
        console.log(newData);
        if (newData) {
          //已登录,进入长连接
          this.initWebSocket();
        } else if (!newData && old) {
          //已退出
          //关闭长连接
          this.websocketclose();
        }
      },
      immediate: true,
    },
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function () {
        this.isRouterAlive = true;
      });
    },
    //1、初始化weosocket
    initWebSocket() {
      try {
        if (typeof WebSocket === "undefined") {
          alert("您的浏览器不支持socket");
        }
        if (typeof MozWebSocket === "function") {
          WebSocket = MozWebSocket;
        }

        if (this.websock && this.websock.reayState === 1) {
          this.websock.close();
        }

        const wsuri =
          "ws://118.31.71.7:8091/socket/" + this.$getStorage("userinfo").id; //ws地址

        this.websock = new WebSocket(wsuri);
        console.log(this.websock);
        this.websock.onopen = this.websocketonopen; //打开连接

        this.websock.onerror = this.websocketonerror; //连接失败

        this.websock.onmessage = this.websocketonmessage; //发送数据

        this.websock.onclose = this.websocketclose; //关闭连接
      } catch (err) {
        console.log(err);
      }
    },
    //1、打开连接
    websocketonopen(e) {
      console.log("WebSocket连接成功");
    },
    //2、连接失败
    websocketonerror(e) {
      //连接发生错误错误
      console.log("WebSocket连接发生错误");
    },
    //3、接收后台的响应数据
    websocketonmessage(e) {
      //数据接收
      const data = JSON.parse(e.data);
      console.log(data);
      //消息提示
      if (this.$store.state.noti) {
        //新的数据
        this.$notify({
          // title: 'HTML 片段',
          dangerouslyUseHTMLString: true,
          message: `<div class="notiBox" >
        <div><img class="notiImg" src="${data.createHeadImg}"></img></div>
        <div><h4>${data.title}</h4><p class="time"><span>${this.getStandardDate(
            data.createTime
          )}</span></p></div>
        </div>
        `,
          onClick: () => {
            console.log(data.typeName);
            if (data.typeName == "聊天通知") {
              this.$router.push({ name: "myall", params: { showNoti: true } });
            } else if ((data.typeName = "消息通知")) {
              this.$router.push({
                name: "MyHome",
                params: { showMyNoti: true },
              });
            }
          },
        });
        if (data.typeName == "聊天通知") {
          //存储到vuex
          this.$store.commit("setChat", data);
        }
      } else {
        //初始化
        //存储到vuex
        this.$store.commit("setNoti", data);
      }
    },
    //4、发送数据
    websocketsend(message) {
      console.log(message);
      //数据发送
      this.websock.send(JSON.stringify(message));
    },
    //5、关闭连接
    websocketclose(e) {
      console.log("connection closed (" + e.code + ")");
    },
    getStandardDate(time) {
      var date = new Date(time); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + " " + h + m + s; //时分秒可以根据自己的需求加上
    },
  },
};
</script>

<style lang="less">
@import url("./less/base.less");
#box {
  width: 100%;
  background-color: #2a2a31;
}
a {
  color: #9ba5bb;
  text-decoration: none;
}
ul {
  list-style: none;
}
* {
  margin: 0;
  padding: 0;
}
.mi {
  color: #312a6d !important;
}
.bi {
  color: #1890ff !important;
}
.yi {
  color: #fcc64a !important;
}
.ri {
  color: #ff4402 !important;
}
.gi {
  color: #3eca69 !important;
}
.mi-bg {
  background: #312a6d !important;
}
.gri-bg {
  color: #9ba5bb !important;
}
.bi-bg {
  background: #1890ff !important;
}
.yi-bg {
  background: #fcc64a !important;
}
.ri-bg {
  background: #ff4402 !important;
}
.gi-bg {
  background: #3eca69 !important;
}
.bi-bor {
  border: 1px solid #1890ff !important;
}
.yi-bor {
  border: 1px solid #fcc64a !important;
}
.ri-bor {
  border: 1px solid #ff4402 !important;
}
.gi-bor {
  border: 1px solid #3eca69 !important;
}
.gri-bg {
  background-color: #9ba5bb;
}
::-webkit-scrollbar {
  width: 7px;
  height: 1px;
}

::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px;
  background: #cecece;
}
// 消息提示
.global-messageZindex {
  z-index: 3000 !important;
}
//消息通知
.notiBox {
  display: flex;
  align-items: center;
  .notiImg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    display: inline-block;
  }
  .time {
    font-size: 12px;
    color: #aaa;
  }
}
</style>
